<template>
    <div>
        <div :id="id" style="width: 100%; height: 100%; background-color: #000"></div>


    </div>
</template>
<script setup lang="ts">
import '@/assets/imou-player.css'
import '@/assets/imou-player.js'
import { onMounted, onUnmounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import { getKitToken } from '@/api/imouIotApi';
import type { Iot } from '@/types/Iot';
const props = defineProps<{
    iot: Iot
}>()
let random = (Math.random() + '').replace('.', '')
const id = ref('luqi' + random)
const deviceCode = ref('')
const appId = ref('')
const appSecret = ref('')
const channelId = ref('')
const token = ref('')
let player: any;
const destroy = () => {
    player.destroy();
    player = null!;
};
const init = () => {
    if (player) {
        destroy();
    }
    let node = document.querySelector('#' + id.value)
    player = new imouPlayer({
        id: id.value, // 视频容器ID
        width: node!.clientWidth,
        height: node!.clientHeight,
        deviceId: deviceCode.value,
        channelId: channelId.value,
        token: token.value,
        // 1 直播  2 录播
        type: 1,
        // 直播 0 高清  1 标清  默认
        streamId: 0,
        // 录播 云录像 cloud 本地录像 localRecord 默认 云录像
        recordType: "cloud",
        mute: false,
        handleError: (err: any) => {
            message.error(err.errMsg)
        },
    });

};

onMounted(async () => {
    deviceCode.value = props.iot.deviceCode!
    for (let item of props.iot.deviceParam) {
        if (item.name == 'appId') {
            appId.value = item.value
        }
        if (item.name == 'appSecret') {
            appSecret.value = item.value
        }
        if (item.name == 'channelId') {
            channelId.value = item.value
        }
    }

    // let res = await getAccessToken(appId.value, appSecret.value)
    // let accessToken = res.result.data.accessToken
    let res = await getKitToken(props.iot.id!)
    token.value = res.data

    // console.log('appId:', appId.value)
    // console.log('appSecret:', appSecret.value)
    // console.log('channelId:', channelId.value)
    // console.log('token:', token.value)
    await init()
})
onUnmounted(() => {

    if (player) {
        player.destroy()
    }
})
</script>

<style scoped></style>